import React, { Component } from 'react';
import { Button, Image, Modal, Form, Input } from 'antd';
import GoBack from "@/components/TheGoBack";
import { apiServiceProviderId, apiServiceReview } from '@/request/serverAuth'
import './style.less'
const { TextArea } = Input;
export default class AuthDetail extends Component {
    formRef = React.createRef()
    constructor(props) {
        super(props)
        this.state = {
            infos: {
                name: '姓名',
                mobile: '手机号',
                wxNumber: '微信号',
                occupationClass: '职业类型',
                serviceRange: '服务范围',
                area: '地区',
                address: "详细地址",
            },
            imgs: {
                idCardFront: '身份证照片-正面',
                idCardBack: '身份证照片-背面',
                zmImages: '芝麻分截图',
                petImages: '宠物合照照片',
                skillImages: '技能证书照片'
            },
            previewVisible:false,
            serviceProviderId: '',
            dataSource: {},
            isModalVisible: false,
            mode: 'Y',
            previewImgList:[]
        }
    }
    componentDidMount() {
        this.setState({
            serviceProviderId: this.props.match.params.id,
            mode: this.props.match.params.mode == 1 ? 'Y' : 'N'
        }, () => {
            this.getDetail()
        })

    }
    getDetail = () => {
        const { serviceProviderId } = this.state
        apiServiceProviderId({
            serviceProviderId
        }).then(res => {
            if (res.code == 0) {
                this.setState({
                    dataSource: res.data
                })
            }
        })
    }
    handlePass = (approvalStatus) => {
        if (approvalStatus == 1) {
            Modal.confirm({
                title: '提示',
                content: '确认通过审核吗？',
                onOk: () => {
                    apiServiceReview({
                        approvalStatus,
                        serviceProviderId: this.state.serviceProviderId
                    }).then(res => {
                        if (res.code == 0) {
                            React.$message({ type: 'success', content: `操作成功` })
                            this.props.history.goBack()
                        }
                    })
                },
                onCancel() {
                },
            });

        } else {
            this.formRef.current.validateFields().then(async values => {
                console.log(values, 'values');

                apiServiceReview({
                    ...values,
                    approvalStatus,
                    serviceProviderId: this.state.serviceProviderId
                }).then(res => {
                    if (res.code == 0) {
                        React.$message({ type: 'success', content: `操作成功` })
                        this.props.history.goBack()
                    }
                })
            })
        }


    }
    onCancel = () => {
        this.formRef.current.resetFields();
        this.setState({ isModalVisible: false })
    }
    render() {
        const { infos, imgs, dataSource, isModalVisible, mode ,previewVisible,previewImgList} = this.state
        return (
            <div className='p-layout-box'>
                <GoBack history={this.props.history} title={"申请信息"} />
                {
                    mode == 'N' && <div className='btns'>
                        <Button style={{ marginRight: 20 }} onClick={() => this.setState({ isModalVisible: true })}>审核拒绝</Button>
                        <Button type='primary' onClick={() => this.handlePass(1)}>审核通过</Button>
                    </div>
                }
                <div className="content">
                    <div className='infos'>
                        {
                            Object.keys(infos).map(key => {
                                return (
                                    <div className="li">
                                        <div className='label'>{infos[key]}:</div>
                                        <div className='value'>{dataSource[key]}</div>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className='imgs'>
                        {
                            Object.keys(imgs).map(key => {
                                return (
                                    <div className="li">
                                        <div className='label'>{imgs[key]}:</div>
                                        {
                                            dataSource[key] ? dataSource[key].split(',').map(item => {
                                                return <Image
                                                    className='img'
                                                    src={item}
                                                    preview={{
                                                        visible: false,
                                                      }}
                                                    onClick={()=>this.setState({
                                                        previewVisible:true,
                                                        previewImgList:dataSource[key].split(',')
                                                    })}
                                                />
                                            }) : '无'
                                        }
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div
                        style={{
                            display: 'none',
                        }}
                    >
                        <Image.PreviewGroup
                            preview={{
                                visible:previewVisible,
                                onVisibleChange: (vis) => this.setState({
                                    previewVisible:vis
                                }),
                            }}
                        >
                            {
                                previewImgList.map(item=>{
                                    return <Image src={item} />
                                })
                            }
                            
                        </Image.PreviewGroup>
                    </div>
                    {/* <div className='line'></div>
                    {
                        dataSource.origin && (
                            <div>
                                <div className='title'>原信息</div>
                                <div className='infos'>
                                    {
                                        Object.keys(infos).map(key => {
                                            return (
                                                <div className="li">
                                                    <div className='label'>{infos[key]}: &nbsp;&nbsp;</div>
                                                    <div className='value'>{dataSource.origin[key]}</div>
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                                <div className='imgs'>
                                    {
                                        Object.keys(imgs).map(key => {
                                            return (
                                                <div className="li">
                                                    <div className='label'>{imgs[key]}:</div>
                                                    {
                                                        dataSource[key] ? dataSource.origin[key].split(',').map(item => {
                                                            return <Image
                                                                className='img'
                                                                src={item}
                                                            />
                                                        }) : '无'
                                                    }
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            </div>
                        )
                    } */}
                </div>
                <Modal title="请输入拒绝原因" visible={isModalVisible} onOk={() => this.handlePass(2)} onCancel={() => this.onCancel()}  >
                    <Form
                        ref={this.formRef}
                        name="basic"
                        labelCol={{
                            span: 0,
                        }}
                        wrapperCol={{
                            span: 24,
                        }}
                        autoComplete="off"
                    >
                        <Form.Item
                            label=""
                            name="approvalMsg"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入拒绝原因！',
                                }
                            ]}
                        >
                            <TextArea maxLength={200} />
                        </Form.Item>
                    </Form>
                </Modal>
            </div >
        );
    }
}
